<template>
  <div id="bf">
<!--    面包屑-->
    <div id="header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>附件管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
<!--    搜索-->
    <div id="select">
      <form method="post" action="#" style="display: flex;">
        <div style="width: 300px" class="find1" >
          <span style="width:40%">图片路径：</span>
          <el-input  v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div style="width: 300px" class="find1">
          <span style="width:40%">图片路径：</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="find1">
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <el-button type="primary" @click="dialogVisible = true">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>
      </form>
<!--      用于显示附件-->
      <el-row :gutter="20" style="height:430px;">
        <el-col style="margin-top:10px;" v-for="image in this.list" :key="image.id" :span="6">
          <div class="grid-content bg-purple">
            <el-image
              :alt="image.path"
              :fit="fits"
              :preview-src-list="srcList"
              style="width:200px;height:170px"
              :src="'https://www.zykhome.club/'+image.path"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <div>
              <el-tag
                size="mini"
                effect="dark"
                type="success"
                style="margin-left:50px;"
              >{{image.width}}px X {{image.height}}px</el-tag>
              <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="del(image.id)">
                <el-button
                  v-hasPermission="'attachment:delete'"
                  style="margin-left:30px;"
                  icon="el-icon-delete"
                  size="mini"
                  type="text"
                  slot="reference"
                >删除</el-button>
              </el-popconfirm>
            </div>
          </div>
        </el-col>
      </el-row>
<!--      分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[8, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="10">
      </el-pagination>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<style>
  #bf{
    margin: auto;
    padding: auto;
  }
  #select{
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 550px;
    margin-top: 10px;
  }
  .find1{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    padding-top: 10px;
  }
</style>
<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        //搜索框
        input: '',
        //下拉框
        options: [{
          value: '1',
          label: '.jsp/.JSP'
        }, {
          value: '2',
          label: '.png/.PNG'
        }, {
          value: '3',
          label: '.gif/.GIF'
        }],
        value: '',
        //上传会话框
        dialogVisible: false,
        //分页
        currentPage4: 4
      }
    }
  }
</script>
